import {useRef, useState} from "react";
import UploadFileCom from "@/components/UploadFileCom/index.jsx";
import {Button} from "antd";
import CameraCapture from "@/components/CameraCapture/index.jsx";
import {saveOneEquipmentAPI} from "@/apis/equipment.jsx";



const Test = () => {

    // 设置状态参数，接收组件传递过来的数据
    // const [file,setFile]=useState([])

    const[cameraBase64List,setCameraBase64List]=useState([])
    const cameraFilesListRef=useRef([]);


    // 第二部：创建一个函数，这个函数会被传递到子组件中，这里面有一个基本逻辑是一个状态值通过状态函数设置
    const formData=new FormData();
    const getFile=async (fileFileList)=>{
        console.log(fileFileList);
        formData.append('eqName','测试12-挖掘机');
        formData.append('brand','东山牌')
        formData.append('pieces','台')
        formData.append('model','DS-09')
        formData.append('typeName','挖土机:挖掘机')
        fileFileList.forEach((item)=>{
            formData.append('eqPhotoList',item)
        })
        cameraFilesListRef.current.forEach(item=>{
            formData.append('eqPhotoList',item)
        })

        const res = await saveOneEquipmentAPI(formData);
        console.log(res);

    }


    const getCamera=(cameraObject)=>{
        // 每次获取摄像头模块
        setCameraBase64List(()=>[]);
        // setCameraFilesList(()=>[]);
        cameraFilesListRef.current=[];
        // 解构出拍照组件传递过来的两个数组，记住，名字应该与拍照组件return后的名字一摸一样
        const {base64List,fileList}=cameraObject;
        // 使用两个状态参数接收两个组件传过来的数据
        setCameraBase64List(prevState=>[...prevState,...base64List]);
        cameraFilesListRef.current=fileList;
    }

    const showData=()=>{
        // 这个是一个辅助函数，只是用来看看组件传来的数据是什么，可以删除
        console.log(cameraBase64List);
        console.log(cameraFilesListRef.current);
    }

    const closeCamera=()=>{
        // setCameraFilesList(()=>[]);
        cameraFilesListRef.current=[];
        setCameraBase64List(()=>[]);
    }

    return(
        <>
            {/*第三步：创建一个onGetMsg属性，通过这个属性向子组件传递一个上面创建的函数，*/}

            <hr/>
            <CameraCapture onGetCamera={getCamera}  onCloseCamera={closeCamera}/>
            <br/>

            <UploadFileCom onGetFile={getFile}/>

            <Button onClick={showData}>查看数据</Button>
        </>
    )

}

export default Test